<template>
	<view class="house-container">
		<!-- 顶部导航栏 -->
		<view class="nav-header">
			<view class="nav-title">
				<view class="view-toggle" @click="toggleView">
					<image :src="isGridView ? '/static/house/grid.svg' : '/static/house/list.svg'" mode="aspectFit"
						class="view-icon"></image>
				</view>
				<view class="title-tabs">
					<text class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">合租</text>
					<text class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">整租</text>
				</view>
				<view class="nav-actions">
					<view class="refresh-icon">
						<uni-icons type="refresh" size="20" @click="refreshList"></uni-icons>
					</view>
					<view class="search-icon">
						<uni-icons type="search" size="20" @click="showSearch"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加搜索容器 -->
		<view class="search-container" v-if="showSearchView">
			<!-- 搜索头部 -->
			<view class="search-header">
				<uni-search-bar v-model="searchText" :placeholder="searchPlaceholder" @confirm="handleSearch"
					@clear="clearSearch" @cancel="hideSearch" cancelButton="auto" clearButton="always" :focus="true"
					class="custom-search-bar"></uni-search-bar>
			</view>

			<!-- 标签栏 -->
			<view class="tag-bar search-tag-bar">
				<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
					<uni-tag v-for="(tag, index) in searchFilterTags" :key="index" :text="tag"
						:type="currentSearchTag === index ? 'primary' : 'default'" :inverted="false" :custom-style="{
							backgroundColor: currentSearchTag === index ? '' : '#f5f5f5',
							color: currentSearchTag === index ? '' : '#666',
							borderWidth: '0',
							marginRight: '16rpx',
							display: 'inline-block'
						}" @click="switchSearchTag(index)" class="search-tag-item"></uni-tag>
				</scroll-view>
			</view>
		</view>

		<!-- 添加 swiper 组件 -->
		<swiper class="swiper-content" :current="currentTab" @change="onSwiperChange" @transition="onSwiperTransition"
			@animationfinish="onAnimationFinish">
			<!-- 合租内容 -->
			<swiper-item>
				<view class="swiper-item-container">
					<!-- 将两个标签栏放在固定容器中 -->
					<view class="filter-container">
						<!-- 标签栏 -->
						<filter-bar :filters="['department', 'status', 'filter', 'sort']" :filter-data="filterData"
							@filter-change="handleFilterChange"></filter-bar>

						<!-- 标签栏 -->
						<view class="tag-bar">
							<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
								<uni-tag v-for="(tag, index) in tagList" :key="index" :text="tag"
									:type="currentTag === index ? 'default' : 'default'" :inverted="false"
									:custom-style="{
										backgroundColor: currentTag === index ? '#E6F7FF' : '#f5f5f5',
										color: currentTag === index ? '#1890FF' : '#333',
										borderWidth: '0',
										marginRight: '16rpx',
										display: 'inline-block'
									}" size="small" @click="onTagChange(index)" class="tag-item">
								</uni-tag>
							</scroll-view>
						</view>
					</view>

					<!-- 房源列表 -->
					<scroll-view class="scrollable-content" scroll-y :show-scrollbar="false"
						:refresher-enabled="!isTransitioning" :refresher-triggered="isLoading"
						@refresherrefresh="refreshList" @scrolltolower="loadMore">
						<view class="house-list">
							<!-- 内容保持不变 -->
							<!-- 芭比伦堡 -->
							<view v-for="building in sharedRentBuildings" :key="building.name" class="list-item">
								<view class="building-section">
									<view class="building-header">
										<view class="header-main">
											<text class="building-name">{{ building.name }}</text>
											<text class="room-count">共{{building.addresses.reduce((total,
												addr) => total + addr.rooms.length, 0)}}间</text>
										</view>
									</view>
									<view class="room-list">
										<!-- 遍历地址 -->
										<template v-for="(address, addressIndex) in building.addresses"
											:key="address.address">
											<view class="address-container"
												:style="addressIndex > 0 ? 'margin-top: 20rpx;' : ''">
												<text class="building-address">{{ address.address }}</text>
												<view class="add-room-tag">+房间</view>
											</view>
											<!-- 遍历房间 -->
											<view class="room-item" v-for="(item, index) in address.rooms" :key="index"
												:class="{ 'vacant-room': item.tenant.includes('空'), 'list-view': !isGridView }">
												<view class="room-content">
													<view class="left-container">
														<view class="room-info-wrapper">
															<view class="room-number">{{ item.number }}</view>
															<view class="room-info">
																<view class="tenant-name">
																	<template v-if="item.tenant.includes('空')">
																		<template v-if="isGridView">
																			空<text class="vacant-days">{{
																				getVacantDays(item.tenant)
																			}}</text>天
																		</template>
																	</template>
																	<template v-else>
																		{{ item.tenant }}
																	</template>
																</view>
																<view class="room-price">¥{{ item.price }}
																</view>
															</view>
														</view>
														<view class="tag-container">
															<view class="room-status" v-show="!isGridView">
																<template v-if="item.tenant.includes('空')">
																	空<text class="vacant-days">{{
																		getVacantDays(item.tenant)
																	}}</text>天
																</template>
																<template v-else>
																	<text class="renting">在租中</text>
																</template>
															</view>
															<uni-tag :text="getTagConfig(item).text" type="warning"
																:inverted="false" size="small"
																:custom-style="getTagConfig(item).style">
															</uni-tag>
														</view>
													</view>
													<view class="right-container">
														<view class="add-btn" @click="addRoom(item)">
															<uni-icons type="plus" size="16"></uni-icons>
														</view>
													</view>
												</view>
											</view>
										</template>
									</view>
								</view>
							</view>
							<!-- 加载更多 -->
							<view class="load-more">
								<uni-load-more :status="loadMoreStatus"></uni-load-more>
							</view>
						</view>
					</scroll-view>
					<!-- 浮动底部统计信息 - 移到swiper-item内部 -->
					<view class="floating-statistics" v-if="currentTab === 0">
						<text>{{ statistics }}</text>
					</view>
				</view>
			</swiper-item>

			<!-- 整租内容 -->
			<swiper-item>
				<view class="swiper-item-container">
					<!-- 将两个标签栏放在固定容器中 -->
					<view class="filter-container">
						<!-- 标签栏 -->
						<filter-bar :filters="['department', 'status', 'filter']" :filter-data="filterData"
							@filter-change="handleFilterChange"></filter-bar>

						<!-- 标签栏 -->
						<view class="tag-bar">
							<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
								<uni-tag v-for="(tag, index) in tagList" :key="index" :text="tag"
									:type="currentTag === index ? 'default' : 'default'" :inverted="false"
									:custom-style="{
										backgroundColor: currentTag === index ? '#E6F7FF' : '#f5f5f5',
										color: currentTag === index ? '#1890FF' : '#333',
										borderWidth: '0',
										marginRight: '16rpx',
										display: 'inline-block'
									}" size="small" @click="onTagChange(index)" class="tag-item">
								</uni-tag>
							</scroll-view>
						</view>
					</view>
					<!-- 房源列表 -->
					<scroll-view class="scrollable-content" scroll-y :show-scrollbar="false"
						:refresher-enabled="!isTransitioning" :refresher-triggered="isLoading"
						@refresherrefresh="refreshList" @scrolltolower="loadMore">
						<!-- 内容保持不变 -->
						<view class="house-list">
							<!-- 芭比伦堡 -->
							<view v-for="building in wholeRentBuildings" :key="building.name" class="list-item">
								<view class="building-section">
									<view class="building-header">
										<view class="header-main">
											<text class="building-name">{{ building.name }}</text>
											<text class="room-count">共{{ building.rooms.length }}套</text>
										</view>
									</view>
									<view class="room-list">
										<!-- 芭比伦堡的房间项 -->
										<view class="room-item" v-for="(item, index) in building.rooms" :key="index"
											:class="{ 'vacant-room': item.tenant.includes('空'), 'list-view': !isGridView }">
											<view class="room-content">
												<view class="left-container">
													<view class="room-info-wrapper">
														<view class="room-number">{{ item.building }} · {{
															item.room
														}}
														</view>
														<view class="room-info">
															<view class="tenant-name">
																<template v-if="item.tenant.includes('空')">
																	<template v-if="isGridView">
																		空<text class="vacant-days">{{
																			getVacantDays(item.tenant)
																		}}</text>天
																	</template>
																</template>
																<template v-else>
																	{{ item.tenant }}
																</template>
															</view>
															<view class="room-price">¥{{ item.price }}
															</view>
														</view>
													</view>
													<view class="tag-container">
														<view class="room-status" v-show="!isGridView">
															<template v-if="item.tenant.includes('空')">
																空<text class="vacant-days">{{
																	getVacantDays(item.tenant)
																}}</text>天
															</template>
															<template v-else>
																<text class="renting">在租中</text>
															</template>
														</view>
														<uni-tag :text="getTagConfig(item).text" type="warning"
															:inverted="false" size="small"
															:custom-style="getTagConfig(item).style">
														</uni-tag>
													</view>
												</view>
												<view class="right-container">
													<view class="add-btn" @click="addRoom(item)">
														<uni-icons type="plus" size="16"></uni-icons>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 加载更多 -->
							<!-- 加载更多 -->
							<view class="load-more">
								<uni-load-more :status="loadMoreStatus"></uni-load-more>
							</view>
						</view>
					</scroll-view>
					<!-- 浮动底部统计信息 -->
					<view class="floating-statistics" v-if="currentTab === 1">
						<text>{{ statistics }}</text>
					</view>
				</view>

			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	computed: {
		/**
		 * 计算统计信息
		 * @returns {string} 格式化的统计信息文本
		 */
		statistics() {
			if (this.currentTab === 0) {
				// 合租统计
				const buildings = this.sharedRentBuildings;
				const totalBuildings = buildings.length;
				const totalRooms = buildings.reduce((total, building) => {
					return total + building.addresses.reduce((roomTotal, address) => {
						return roomTotal + address.rooms.length;
					}, 0);
				}, 0);
				return `${totalBuildings}套 | ${totalRooms}间`;
			} else {
				// 整租统计
				const buildings = this.wholeRentBuildings;
				const totalBuildings = buildings.length;
				const totalRooms = buildings.reduce((total, building) => {
					return total + building.rooms.length;
				}, 0);
				return `${totalBuildings}套 | ${totalRooms}间`;
			}
		}
	},
	data() {
		return {
			isTransitioning: false, // 添加过渡状态标记
			isSwitching: false, // 添加切换状态标记
			currentTab: 0, // 当前选中的标签页：0-合租，1-整租
			isGridView: true, // 控制视图模式，true 为网格视图，false 为列表视图
			isLoading: false,
			noMore: false,
			page: 1,
			loadMoreStatus: 'more', // 加载状态：more-加载前，loading-加载中，noMore-没有更多
			showSearchView: false,
			searchText: '',
			searchPlaceholder: "小区/楼栋/地址/门牌号/租客(含手机)/房源编号",
			currentSearchTag: 0,
			searchFilterTags: ['综合', '小区/楼栋', '地址', '门牌号', '租客(含手机)','房源编号'],
			currentTag: -1,
			tagList: [
				'空房可租',
				'即将离店',
				'今日到期',
				'签约中',
				'有欠款',
				'维修房',
				'代收款',
				'已预订',
				'到期未退房'
			],
			// 添加筛选数据配置
			filterData: {
				department: [
					{
						value: 'dept1',
						label: '总部',
						children: [
							{ value: 'user1', label: '张三' },
							{ value: 'user2', label: '李四' }
						]
					},
					{
						value: 'dept2',
						label: '分部',
						children: [
							{ value: 'user3', label: '王五' },
							{ value: 'user4', label: '赵六' }
						]
					}
				],
				status: [
					{
						title: '业务状态',
						type: 'businessStatus',
						options: [
							{ value: 'reserved', label: '已预订' },
							{ value: 'pendingApproval', label: '合同待审批' },
							{ value: 'signing', label: '签约中' },
							{ value: 'renting', label: '在租中' },
							{ value: 'movingIn', label: '将搬入' },
							{ value: 'leaving', label: '即将离店' },
							{ value: 'expireToday', label: '今日到期' },
							{ value: 'expiredNoCheckout', label: '到期未退房' },
							{ value: 'pendingPayment', label: '待收款' },
							{ value: 'arrears', label: '有欠款' },
							{ value: 'checkoutUnsettled', label: '退租未结账' }
						]
					},
					{
						title: '房源状态',
						type: 'houseStatus',
						options: [
							{ value: 'vacantRentable', label: '空房可租' },
							{ value: 'vacantUnrentable', label: '空房不可租' },
							{ value: 'rented', label: '已出租' },
							{ value: 'ownerCheckout', label: '业主退房' },
							{ value: 'dirty', label: '脏房' },
							{ value: 'maintenance', label: '维修' },
							{ value: 'locked', label: '锁房' }
						]
					}
				],
				filter: [
					{
						title: '房间状态',
						type: 'roomStatus',
						options: [
							{ value: 'available', label: '可租' },
							{ value: 'reserved', label: '已预订' },
							{ value: 'occupied', label: '已入住' }
						]
					},
					{
						title: '租客状态',
						type: 'tenantStatus',
						options: [
							{ value: 'normal', label: '正常' },
							{ value: 'arrears', label: '欠费' },
							{ value: 'expired', label: '已到期' }
						]
					}
				],
				sort: [
					{ value: 'default', label: '默认排序' },
					{ value: 'emptyDays', label: '空置天数' }
				]
			},
			wholeRentBuildings: [{
				name: '创客广场',
				rooms: [{
					building: '1号1单元',
					room: '1207',
					tenant: '张毅',
					price: '1,750'
				}, {
					building: '1号1单元',
					room: '1214',
					tenant: '空91天',
					price: '1,800'
				}, {
					building: '1号1单元',
					room: '1407',
					tenant: '空5天',
					price: '0'
				}]
			}, {
				name: '金地中心城',
				rooms: [{
					building: '4号2单元',
					room: '2102',
					tenant: '苏虎威',
					price: '0'
				}]
			}],
			tagConfigs: {
				default: { // 默认状态
					text: '',
					style: {
						display: 'none'
					}
				},
				collect: { // 收租
					text: '收',
					style: {
						backgroundColor: '#ff9500',
						color: '#ffffff',
						borderWidth: '0',
						borderRadius: '6rpx',
						padding: '2rpx 8rpx'
					}
				},
				leaving: { // 即将离店
					text: '离',
					style: {
						backgroundColor: '#13c2c2',
						color: '#ffffff',
						borderWidth: '0',
						borderRadius: '6rpx',
						padding: '2rpx 8rpx'
					}
				},
				expired: { // 到期
					text: '到',
					style: {
						backgroundColor: '#ff4d4f',
						color: '#ffffff',
						borderWidth: '0',
						borderRadius: '6rpx',
						padding: '2rpx 8rpx'
					}
				},
				signing: { // 签约中
					text: '签',
					style: {
						backgroundColor: '#52c41a',
						color: '#ffffff',
						borderWidth: '0',
						borderRadius: '6rpx',
						padding: '2rpx 8rpx'
					}
				}
			},
			sharedRentBuildings: [{
				name: '芭比伦堡',
				addresses: [{
					address: '6号4单元102',
					rooms: [{
						number: '1',
						tenant: '周家辉',
						price: '800'
					}, {
						number: '2',
						tenant: '周方哲',
						price: '500'
					}, {
						number: '3',
						tenant: '屈超',
						price: '900'
					}, {
						number: '5',
						tenant: '空49天',
						price: '1,000'
					}, {
						number: '6',
						tenant: '王品杰',
						price: '900'
					}]
				}]
			}, {
				name: '保利华都',
				addresses: [{
					address: '5号1单元1204',
					rooms: [{
						number: '1',
						tenant: '王涛',
						price: '1,030',
						status: 'collect'
					}, {
						number: '2',
						tenant: '谢亮',
						price: '1,200'
					}, {
						number: '3',
						tenant: '何莉莉',
						price: '1,500',
						status: 'collect'
					}, {
						number: '5',
						tenant: '史会容',
						price: '950'
					}]
				}, {
					address: '12号1单元1503',
					rooms: [{
						number: '1',
						tenant: '胡思路',
						price: '1,250'
					}, {
						number: '2',
						tenant: '付子雄',
						price: '1,500'
					}, {
						number: '3',
						tenant: '毛慧杨',
						price: '1,000',
						status: 'expired'
					}]
				}]
			}]
		}
	},
	onLoad() {
		// 页面加载时获取房源数据
		this.getHouseList();
	},
	// 在每个TabBar页面的onShow方法中添加
	onShow() {
		uni.$emit('tabChange');
	},
	methods: {
		/**
		 * 切换标签页（合租/整租）
		 * @param {number} index - 标签页索引：0-合租，1-整租
		 */
		switchTab(index) {
			this.currentTab = index;
		},
		/**
		 * 监听swiper过渡动画开始
		 * @param {Object} e - 事件对象
		 */
		onSwiperTransition(e) {
			// 当 swiper 开始滑动时，设置 isTransitioning 为 true
			if (e.detail.dx !== 0) {
				this.isTransitioning = true;
			}
		},
		/**
		 * 监听swiper动画完成
		 */
		onAnimationFinish() {
			// 动画完全结束后，重置状态
			setTimeout(() => {
				this.isTransitioning = false;
			}, 500);
		},
		/**
		 * 监听swiper切换事件
		 * @param {Object} e - 事件对象
		 */
		onSwiperChange(e) {
			this.currentTab = e.detail.current;
		},
		/**
		 * 刷新列表数据
		 */
		refreshList() {
			// 刷新列表数据
			this.page = 1;
			this.noMore = false;
			this.loadMoreStatus = 'more';
			this.getHouseList(true);
		},
		/**
		 * 标签筛选变更
		 * @param {number} index - 选中的标签索引
		 */
		onTagChange(index) {
			this.currentTag = index;
			// 根据标签筛选房源列表
			this.refreshList();
		},
		/**
		 * 获取房间标签配置
		 * @param {Object} item - 房间数据项
		 * @returns {Object} 标签配置对象
		 */
		getTagConfig(item) {
			// 这里添加判断逻辑，根据实际需求返回对应的标签配置
			// 示例逻辑：
			if (!item.status) {
				return this.tagConfigs.default;
			}
			if (item.status === 'expired') {
				return this.tagConfigs.expired;
			} else if (item.status === 'leaving') {
				return this.tagConfigs.leaving;
			} else if (item.status === 'signing') {
				return this.tagConfigs.signing;
			}
			return this.tagConfigs.collect;
		},
		/**
		 * 获取房源列表数据
		 * @param {boolean} refresh - 是否为刷新操作
		 */
		getHouseList(refresh = false) {
			// 模拟获取房源数据
			this.isLoading = true;
			this.loadMoreStatus = 'loading';
			setTimeout(() => {
				this.isLoading = false;
				// 模拟没有更多数据
				if (this.page > 1) {
					this.noMore = true;
					this.loadMoreStatus = 'noMore';
				} else {
					this.loadMoreStatus = 'more';
				}
			}, 1000);
		},
		/**
		 * 显示搜索容器
		 */
		showSearch() {
			this.showSearchView = true;
			this.searchText = '';
		},
		/**
		 * 隐藏搜索容器
		 */
		hideSearch() {
			this.showSearchView = false;
		},
		/**
		 * 清除搜索内容
		 */
		clearSearch() {
			this.searchText = '';
			// 重置筛选结果，显示所有数据
			this.refreshList();
		},
		/**
		 * 处理搜索提交
		 */
		handleSearch() {
			if (!this.searchText.trim()) return;

			// 根据搜索文本和当前选中的标签筛选数据
			const searchText = this.searchText.toLowerCase();
			const searchType = this.currentSearchTag;

			// 这里添加筛选逻辑，根据searchType和searchText过滤数据
			// 例如：筛选合租或整租数据
			if (this.currentTab === 0) {
				// 筛选合租数据
				this.filterSharedRentData(searchText, searchType);
			} else {
				// 筛选整租数据
				this.filterWholeRentData(searchText, searchType);
			}
		},
		/**
		 * 切换搜索标签
		 * @param {number} index - 标签索引
		 */
		switchSearchTag(index) {
			this.currentSearchTag = index;
			// 根据标签类型更新搜索框占位符
			switch (index) {
				case 0:
					this.searchPlaceholder = "小区/楼栋/地址/门牌号/租客(含手机)/房源编号";
					break;
				case 1:
					this.searchPlaceholder = "请输入小区/楼栋关键词";
					break;
				case 2:
					this.searchPlaceholder = "请输入地址关键词";
					break;
				case 3:
					this.searchPlaceholder = "请输入门牌号";
					break;
				case 4:
					this.searchPlaceholder = "请输入租客姓名或手机号";
					break;
				case 5:
					this.searchPlaceholder = "请输入房源编号";
					break;
				default:
					this.searchPlaceholder = "小区/楼栋/地址/门牌号/租客(含手机)/房源编号";
			}
			// 如果已有搜索文本，则重新搜索
			if (this.searchText) {
				this.handleSearch();
			}
		},

		/**
		 * 筛选合租数据
		 * @param {string} searchText - 搜索文本
		 * @param {number} searchType - 搜索类型：0-综合, 1-小区/楼栋, 2-地址, 3-门牌号, 4-租客
		 */
		filterSharedRentData(searchText, searchType) {
			// 根据搜索类型和文本筛选数据
			// 这里只是示例，实际实现需要根据您的数据结构调整
			// searchType: 0-综合, 1-小区/楼栋, 2-地址, 3-门牌号, 4-租客

			// 实现筛选逻辑...

			// 刷新列表显示筛选结果
			this.refreshList();
		},

		/**
		 * 筛选整租数据
		 * @param {string} searchText - 搜索文本
		 * @param {number} searchType - 搜索类型：0-综合, 1-小区/楼栋, 2-地址, 3-门牌号, 4-租客
		 */
		filterWholeRentData(searchText, searchType) {
			// 实现筛选逻辑...

			// 刷新列表显示筛选结果
			this.refreshList();
		},
		/**
		 * 处理筛选条件变更
		 * @param {Object} param - 筛选参数对象
		 * @param {string} param.type - 筛选类型
		 * @param {Object} param.value - 筛选值
		 */
		handleFilterChange({ type, value }) {
			console.log('筛选条件变更:', type, value);
			// 根据筛选类型和值进行相应的数据过滤
			switch (type) {
				case 'department':
					// 处理部门筛选
					const deptValue = value?.level1?.value;
					const userValue = value?.level2?.value;
					// 执行筛选逻辑...
					break;
				case 'status':
					// 处理状态筛选
					// 执行筛选逻辑...
					break;
				case 'filter':
					// 处理高级筛选
					const roomStatus = value?.roomStatus;
					const tenantStatus = value?.tenantStatus;
					// 执行筛选逻辑...
					break;
			}
			// 重新加载或过滤数据
			this.refreshList();
		},
		/**
		 * 加载更多数据
		 */
		loadMore() {
			// 加载更多数据
			if (!this.isLoading && !this.noMore) return;
			this.page++;
			this.getHouseList();
		},
		/**
		 * 添加房间或查看详情
		 * @param {Object} item - 房间数据项
		 */
		addRoom(item) {
			// 添加房间或查看详情
			uni.navigateTo({
				url: `/pages/house/detail?room=${item.number}&tenant=${item.tenant}`
			});
		},
		/**
		 * 切换视图模式（网格/列表）
		 */
		toggleView() {
			this.isGridView = !this.isGridView;
			// 这里可以添加视图切换后的其他逻辑
		},
		/**
		 * 从"空XX天"格式中提取天数
		 * @param {string} tenant - 租客信息文本
		 * @returns {string} 提取的天数
		 */
		getVacantDays(tenant) {
			// 从"空XX天"格式中提取数字
			const match = tenant.match(/\d+/);
			return match ? match[0] : '';
		}
	}
}
</script>

<style lang="scss" scoped>
.house-container {
	min-height: 100%;
	position: relative;
	height: 100%;
	/* 修改为100%而不是100vh，跟随父元素高度 */
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.title-tabs {
	display: flex;
	align-items: center;
	gap: 20rpx;

	.tab-item {
		font-size: 32rpx;
		color: #666;
		position: relative;
		padding: 0 4rpx;

		&.active {
			color: #333;
			font-weight: bold;
		}
	}
}

// 添加搜索容器样式
.search-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2000;
	background-color: #fff;
}

.search-header {
	padding: 10rpx 0;
	background-color: #fff;

	// 自定义uni-search-bar样式
	:deep(.custom-search-bar) {
		.uni-searchbar {
			padding: 10rpx 20rpx;
		}

		.uni-searchbar__box {
			border-radius: 36rpx;
			background-color: #f5f5f5;
		}

		.uni-searchbar__cancel {
			font-size: 28rpx;
			color: #333;
		}
	}
}

.search-tag-bar {
	background-color: #fff;
	padding: 0 0 20rpx 0;
	border-bottom: 1rpx solid #eee;

	.tag-scroll {
		white-space: nowrap;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	// 自定义uni-tag样式
	:deep(.search-tag-item) {
		margin-right: 20rpx;

		&:last-child {
			margin-right: 20rpx;
		}
	}
}

/* 内容区域包装器 - 固定位置 */
.content-wrapper {
	position: fixed;
	top: calc(var(--window-top) + 80rpx);
	/* 导航栏高度 */
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	/* 添加这一行，防止内容溢出 */
	overflow: hidden;
}

/* Swiper 内容 */
.swiper-content {
	flex: 1;
	width: 100%;
	overflow: hidden;
}

/* 确保 swiper-item 内容不会溢出 */
:deep(.uni-swiper-item) {
	overflow: hidden;
}

.swiper-item-container {
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* 可滚动内容区域 */
.scrollable-content {
	flex: 1;
	/* 使用flex布局 */
	height: 0;
	overflow-y: auto;
	/* 明确指定只有垂直方向可滚动 */
	overflow-x: hidden;
	/* 禁止水平滚动 */
	background-color: #fff;
}

/* 筛选区域 */
.filter-container {
	position: relative;
	/* 改为相对定位 */
	width: 100%;
	z-index: 99;
	background-color: #fff;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 移除之前的 scroll-wrapper 相关样式 */
.nav-header {
	background-color: #fff;
	padding: 20rpx 30rpx;
	height: 80rpx;
	box-sizing: border-box;
	position: sticky;
	top: var(--window-top);
	z-index: 1000;

	.nav-title {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.view-toggle {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 44rpx;
			height: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.view-icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.title-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.nav-actions {
			display: flex;
			align-items: center;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);

			.refresh-icon,
			.search-icon {
				margin-left: 30rpx;
				width: 44rpx;
				height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

.house-list {
	height: 100%;
	padding: 24rpx;
	box-sizing: border-box;
	white-space: normal;
	-webkit-overflow-scrolling: touch;
}

.list-item {
	margin-bottom: 20rpx;
}

.building-section {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
	width: 100%;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.building-header {
	padding: 20rpx 24rpx;
	border-bottom: 1rpx solid #f5f5f5;
	background-color: #fafafa;
	display: flex;
	flex-direction: column;

	.header-main {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8rpx;

		.building-name {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
		}

		.room-count {
			font-size: 24rpx;
			color: #999;
			background-color: #f0f0f0;
			padding: 4rpx 14rpx;
			border-radius: 16rpx;
		}
	}
}

.room-list {
	display: flex;
	flex-wrap: wrap;
	padding: 16rpx;

	.address-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 16rpx;

		.building-address {
			font-size: 24rpx;
			color: #ffffff;
			background-color: #999999;
			padding: 4rpx 12rpx;
			border-radius: 8rpx;
		}

		.add-room-tag {
			font-size: 22rpx;
			color: #1890ff;
			background-color: rgba(24, 144, 255, 0.1);
			padding: 4rpx 12rpx;
			border-radius: 12rpx;
			transition: all 0.3s ease;

			&:active {
				opacity: 0.8;
			}
		}
	}
}

.room-item {
	width: calc(50% - 20rpx); // 修改为50%，一行显示两个
	margin: 10rpx;
	background-color: #e6f7f2;
	border-radius: 8rpx;
	padding: 20rpx 0 20rpx 20rpx;
	position: relative;
	box-sizing: border-box;
	transition: all 0.3s ease;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

	&.list-view {
		width: 100%;
		padding: 20rpx 0 20rpx 20rpx;

		.room-content {
			display: flex;
			align-items: center;
			min-height: 80rpx;
		}

		.left-container {
			display: flex;
			flex-direction: column;
			gap: 12rpx;

			.room-info-wrapper {
				display: flex;
				align-items: center;
				width: 100%;

				.room-number {
					margin: 0;
					// width: 60rpx;
				}

				.room-info {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					gap: 20rpx;

					.tenant-name {
						order: 1;
						font-size: 24rpx;
						margin-right: 0;
					}

					.room-price {
						order: 2;
					}
				}
			}

			.tag-container {
				margin-top: 8rpx;
				height: 32rpx;
				min-height: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.room-status {
					font-size: 24rpx;
					color: #333;

					.vacant-days {
						color: #ff4d4f;
						font-weight: bold;
					}

					.renting {
						color: #000000;
					}
				}
			}
		}

		.right-container {
			width: 80rpx;
			height: 100%;
		}

		.add-btn {
			position: relative; // 改回相对定位
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: auto; // 使用 margin: auto 实现居中
			padding: 0;
			transition: all 0.3s ease;

			&:active {
				background-color: #e0e0e0;
			}
		}
	}

	&:active {
		transform: scale(0.98);
	}

	&.vacant-room {
		background-color: #fff0f0;
		/* 空房保持粉色背景 */
		border: 1rpx solid rgba(255, 77, 79, 0.15);

		.tenant-name {
			color: #333;
			/* 修改为黑色 */
			font-weight: 500;
			font-size: 24rpx;
			max-width: 130rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.room-number {
			color: #333;
			/* 修改为黑色 */
		}

		// 删除这些重复的样式定义
		.room-item {
			&.vacant-room {

				// 删除这部分，因为已经在新的结构中定义
				.tenant-name {
					color: #333;
					font-weight: 500;
					font-size: 24rpx;
					max-width: 130rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.room-number {
					color: #333;
				}

				.vacant-days {
					color: #ff4d4f;
					font-weight: bold;
				}

				.room-price {
					font-size: 24rpx;
					color: #333;
					font-weight: bold;
				}
			}
		}

		// 删除这些重复的样式定义
		.room-info {
			.tenant-name {
				font-size: 24rpx;
				color: #333;
				max-width: 130rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.vacant-days {
				color: #ff4d4f;
				font-weight: bold;
			}

			.room-price {
				font-size: 24rpx;
				color: #333;
				font-weight: bold;
			}
		}

		// 删除独立的 tag-container 样式，因为已经在 list-view 中定义
		.tag-container {
			margin-top: 8rpx;
			height: 32rpx;
			min-height: 32rpx;
		}
	}

	.room-number {
		font-size: 24rpx;
		font-weight: normal;
		color: #333;
		/* 保持黑色 */
		margin-bottom: 14rpx;
	}

	.room-info {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.tenant-name {
			font-size: 24rpx;
			color: #333;
			/* 修改为深色 */
			max-width: 130rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.vacant-days {
			color: #ff4d4f;
			/* 空置天数显示为红色 */
			font-weight: bold;
		}

		.room-price {
			font-size: 24rpx;
			color: #333;
			/* 修改为黑色，与图片一致 */
			font-weight: bold;
		}
	}

	.tag-container {
		margin-top: 8rpx;
		height: 32rpx; // 添加固定高度
		min-height: 32rpx; // 确保最小高度
	}
}

.room-content {
	position: relative; // 确保相对定位
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 100%;
	min-height: 120rpx;

	// 添加虚线分隔
	&::after {
		content: '';
		position: absolute;
		right: 80rpx; // 与右侧容器宽度对应
		top: 10rpx;
		bottom: 10rpx;
		width: 0;
		border-right: 2rpx dashed #ddd;
	}
}

.left-container {
	flex: 1;
	margin-right: 20rpx;
	height: 100%; // 添加高度
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.right-container {
	position: relative; // 保持相对定位
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80rpx;
	height: 100%;
	z-index: 1;
}

// 修改现有的 add-btn 样式
.add-btn {
	position: relative; // 改回相对定位
	width: 44rpx;
	height: 44rpx;
	border-radius: 50%;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto; // 使用 margin: auto 实现居中
	padding: 0;
	transition: all 0.3s ease;

	&:active {
		background-color: #e0e0e0;
	}
}

.tag-bar {
	background-color: #fff;
	padding: 20rpx 0;

	.tag-scroll {
		white-space: nowrap;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	:deep(.uni-tag) {
		&:last-child {
			margin-right: 0 !important;
		}
	}
}

.tag-item {
	margin-right: 16rpx;

	&:last-child {
		margin-right: 0;
	}
}

.load-more {
	padding: 20rpx 0;
	text-align: center;
}

.floating-statistics {
	position: fixed;
	bottom: 20rpx;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(80, 80, 80, 0.8);
	color: #ffffff;
	padding: 6rpx;
	border-radius: 6rpx;
	/* 减小圆角到最小 */
	font-size: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	white-space: nowrap;
}
</style>